<template>
	<view :style="Theme">
		<uni-nav-bar leftIcon="arrowleft" :statusBar="true" :fixed="true" title="课程详情" />
		<view class="video">
			<view class="videoc" @click="goVideo">
				<image class="videoc_img" :src="videoInfo.coverUrl"></image>
				<image class="videoc_btn" src="/static/images/index_18.png" mode="widthFix"></image>
				<view class="videoc_zhe"></view>
			</view>
		</view>
		<view class="top">
			<view class="top1 flex flex-between">
				<view class="top1_c1">{{info.title}}</view>
				<!-- <picker mode="selector" :range="rateOptions" @change="onRateChange">
					<view class="top1_c2"><text class="ellipsis">{{ rateOptions[selectedrate] }}</text></view>
				</picker> -->
			</view>
			<view class="top2">
				<view>共{{info.chapters}}讲</view>
				<!-- <view>总时长:xxxx</view> -->
				<view class="top2ri">{{info.pv}}人已学</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="deta">
			<view class="deta_t">
				<view class="deta_tli" :class="index===currentIndex?'active':''" v-for="(item,index) in nav"
					:key="index" @click="changNav(index)">{{item}}</view>
			</view>
		</view>
		<!-- main -->
		<view class="main">
			<!-- 介绍 -->
			<view class="mian_1" v-if="currentIndex===0">
				<view v-html="info.tag"></view>
			</view>
			<!-- 目录 -->
			<view class="mian_2" v-if="currentIndex===1">
				<view class="mul">
					<view class="muli" v-for="(item,index) in info.courseChapters"
						:class="index===muLuIndex?'active':''" :key="index" @click="handleMulu(item,index)">
						<view class="muli_1 flex">
							<image class="muli_1_img"
								:src="index===muLuIndex?'/static/images/index_19.png':'/static/images/index_20.png'">
							</image>
							<view class="muli_1_c">{{item.title}}</view>
						</view>
						<view class="muli_2">
							<view class="muli_2_2 flex">
								<view class="muli_2_1">视频</view>
								<image class="muli_2_2_img" src="/static/images/index_21.png"></image>
								<view class="muli_2_2_c">{{item.timelength | secondsToHms }}</view>
							</view>
							<!-- <view class="muli_2_3">已学习：xxx%</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 大纲 -->
			<view class="mian_1" v-if="currentIndex===2">
				<view v-html="info.outline"></view>
			</view>
			<!-- 目录 -->
			<!-- <view class="mian_2" v-if="currentIndex===2">
				<view class="nodata">
					<image class="nodata_img" src="/static/images/index_22.png" mode="widthFix"></image>
					<view class="nodata_c">暂无心得</view>
				</view>
			</view> -->
			<!-- 目录 -->
			<view class="mian_2" v-if="currentIndex===3">
				<view class="card-list">
					<view v-for="(item2, idx) in smartList" :key="idx" class="card" @click="goClassDetail2(item2)">
						<image :src="item2.coverUrl" class="card-img" mode="aspectFill"></image>
						<view class="card-info">
							<view class="card-title">{{ item2.title }}</view>
							<view class="card-desc">
								<view>章节：共{{ item2.chapters }}讲</view>
							</view>
							<view class="card-footer">
								<text class="card-price">￥{{ item2.price }}</text>
								<text class="card-hot" v-if="item2.hot">HOT</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="dibukong"></view>
		<view class="dibu">
			<button class="pay-btn" @click="toggle('center')">
				<text class="iconfont icon-cart"></text>
				报名并支付
			</button>
		</view>
		<!-- 个人信息收集--弹窗 -->
		<collect-info ref="childRef"></collect-info>
	</view>

</template>

<script>
	import CollectInfo from '@/components/collectInfo/index.vue'
	export default {
		components: {
			CollectInfo
		},
		data() {
			return {
				webviewStyle: {
					width: 0,
					height: 0
				},
				id: '',
				info: {}, //课程详情
				videoInfo: {}, //点击的章节的视频相关信息
				rateOptions: ['倍数', '0.5X', '1.0X', '1.25X', '1.5X', '2.0X'],
				selectedrate: 0,
				currentIndex: 0,
				nav: ['详情', '目录', '大纲', '推荐'],
				list: [1, 2, 3, 4, 5, 6, 7],
				muLuIndex: 0,
				smartList: [{
						img: 'https://www.h5ketang.com/Uploads/Images/202001/1579234989_806312406.jpg',
						title: '技术案例：AI机器人',
						desc: '智能机器人案例解析',
						pageUrl: '/sub_class/pages/classDetail2'
					},
					{
						img: 'https://www.h5ketang.com/Uploads/Images/202011/1604995507_1953887547.gif',
						title: '公开课：创新创业',
						desc: '创新创业实战课程',
						pageUrl: '/sub_class/pages/classDetail2'
					},
					{
						img: 'https://www.h5ketang.com/Uploads/Images/202505/1748594185_1805765341.jpg',
						title: '技术案例：金融风险',
						desc: '大数据风控实践',
						pageUrl: '/sub_class/pages/classDetail2'
					}
				]
			}
		},
		filters: {
		    secondsToHms(seconds) {
		      const hours = Math.floor(seconds / 3600);
		      const minutes = Math.floor((seconds % 3600) / 60);
		      const secs = seconds % 60;
		      return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
		    }
		  },
		onLoad(option) {
			console.log('前一个页面的课程id')
			console.log(option)
			this.id = option.id
			this.getDetail()
			this.getCurrentUserUpdateFlagFun()
			this.getOnlineCourseListRecommendFun() //获取推荐列表
		},
		methods: {
			// 判断当前用户是否更新信息
			getCurrentUserUpdateFlagFun() {
				this.sjuRequest("wx/user/getCurrentUserUpdateFlag", 'POST', {}).then(res => {
					console.log('判断当前用户是否更新信息')
					console.log(res)
					uni.setStorageSync('isUserUpdateFlag', res.data)
					// this.bannerList = res.data
				})
			},
			// 选择倍数
			onRateChange(e) {
				this.selectedrate = e.detail.value;
			},
			//切换nav
			changNav(index) {
				this.currentIndex = index
			},
			// 目录切换题目
			handleMulu(item, index) {
				console.log('切换题目')
				this.videoInfo = item
				this.muLuIndex = index
			},
			// 获取线上详情
			getDetail() {
				this.sjuRequest("/wx/onlineCourse/getOnlineCourseById", 'POST', {
					id: this.id
				}).then(res => {
					console.log('获取线上详情')
					console.log(res)
					if (res.data.tag) {
						res.data.tag = res.data.tag.replace(/img/gi, 'img style="width: 100%;height:auto;"')
					}
					this.info = res.data
					this.videoInfo = res.data.courseChapters[0]
				})
			},
			// 获取推荐列表
			getOnlineCourseListRecommendFun() {
				this.sjuRequest("wx/onlineCourse/getOnlineCourseListRecommend", 'POST', {
					id: this.id
				}).then(res => {
					console.log('获取推荐列表')
					console.log(res)
					this.smartList = res.data.records
				})
			},
			// 线上详情---
			goClassDetail2(item){
				console.log('跳转线上详情1')
				console.log(item)
				uni.navigateTo({
					url: '/sub_class/pages/classDetail2?id='+item.id
				})
			},
			// 报名并支付
			toggle(type) {
				console.log('点击父级---')
				// 先判断是否收集个人信息----如果没有弹出公共组件--收集信息组件;如果已经收集信息,就直接跳支付
				// this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/tab/my/my'
						})
					}, 1000)
					return
				} else if (!uni.getStorageSync('isUserUpdateFlag')) {
					this.$refs.childRef.showTan('center')
					return
				} else {
					console.log('走微信支付流程')
					this.sjuRequest("/wx/order/submitOrder", 'POST', {
						type: 0,
						courseId: this.id
					}).then(res => {
						console.log('提交订单')
						console.log(res)
						if (res.errno === 0) {
							uni.showToast({
								title: '订单创建成功',
								icon: 'success'
							})
							uni.requestPayment({
								provider: "wxpay",
								nonceStr: res.data.nonceStr,
								package: res.data.packageValue,
								timeStamp: res.data.timeStamp,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success(res) {
									console.log('调起支付')
									console.log(res)
									if (res.errMsg === 'requestPayment:ok') {
										uni.showToast({
											icon: 'none',
											title: '支付成功'
										})
										that.getCourseInfoFun() //获取课程详细
										that.isShow = false
									}
								},
								fail(err) {
									console.log('支付失败', err)
									if (err.errMsg === 'requestPayment:fail cancel') {
										uni.showToast({
											icon: 'none',
											title: '支付失败'
										})
									}
								}
							})
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none'
							})
						}
					})
				}
			},
			// 跳转视频播放
			goVideo() {
				// 判断:购买过课程才能看视频
				if (this.info.buy) {
					console.log('当前点击章节的视频信息---现在后端给的参数还不齐全，每个课程都只有第一讲')
					console.log(this.videoInfo)
					uni.navigateTo({
						url: '/sub_class/pages/video?id=' + this.videoInfo.id
					})
				} else {
					uni.showToast({
						title: '请先购买课程哦~',
						icon: 'none'

					})
				}
			},
			// 秒转换成时分秒
			secondsToHms(seconds) {
			      const hours = Math.floor(seconds / 3600);
			      const minutes = Math.floor((seconds % 3600) / 60);
			      const secs = seconds % 60;
			      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			    }
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.video {
		width: 100%;
		height: 400rpx;
	}

	.videoc {
		width: 100%;
		height: 400rpx;
		position: relative;
		cursor: pointer;
	}

	.videoc_img {
		width: 100%;
		height: 400rpx;
		position: absolute;
	}

	.videoc_btn {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		z-index: 99;
		top: 50%;
		left: 50%;
		margin-top: -40rpx;
		margin-left: -40rpx;
	}

	.videoc_zhe {
		width: 100%;
		height: 400rpx;
		background-color: rgba(0, 0, 0, 0.2);
		position: absolute;
		top: 0;
		left: 0;
	}

	.top {
		width: 700rpx;
		padding: 25rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.top1 {
		width: 100%;
		align-items: inherit;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.top1_c1 {
		font-size: 36rpx;
		height: auto;
		width: 100%;
	}

	.top1_c2 {
		width: 100rpx;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 10rpx;
		text-align: center;
		border: 1rpx solid #666;
		margin-top: 10rpx;
	}

	.top2 {
		width: 100%;
		height: auto;
		gap: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.top2 view {
		font-size: 26rpx;
		color: #666;
		flex: 1;
	}

	.top2ri {
		text-align: right;
	}

	.deta {
		width: 100%;
		height: auto;
		background: #fff;
	}

	.deta_t {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.deta_tli {
		width: 25%;
		text-align: center;
	}

	.deta_tli.active {
		color: #31b0e5;
		font-weight: bold;
	}

	.main {
		width: 100%;
		box-sizing: border-box;
	}

	.mian_1 {
		padding: 0 25rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.mian_1_img {
		width: 100%;
		height: auto;
		display: block;
	}

	.mul {
		width: 100%;
		height: auto;
		background: #fff;
	}

	.muli {
		width: 100%;
		height: auto;
		padding: 25rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #eee;
	}

	.muli_1 {
		width: 100%;
		height: auto;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.muli_1_img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.muli_1_c {
		width: 80%;
	}

	.muli_2 {
		height: auto;
		width: 100%;
		color: #666;
		font-size: 26rpx;
		display: flex;
		gap: 20rpx;
		align-items: center;
	}

	.muli_2_1 {
		flex: 1;
		margin-right: 20rpx;
	}

	.muli_2_2 {
		display: flex;
		align-items: center;
		margin-right: 20rpx;

	}

	.muli_2_2_img {
		width: 26rpx;
		height: 26rpx;
		margin-top: 5rpx;
	}

	.muli.active .muli_1_c {
		color: #31b0e5;
	}

	.card-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.card {
		width: 100%;
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		box-shadow: 0 2rpx 8rpx #eee;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.card-img {
		width: 300rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}

	.card-info {
		width: 360rpx;
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.card-title {
		font-weight: bold;
		font-size: 28rpx;
		margin-bottom: 24rpx;
	}

	.card-desc {
		color: #888;
		font-size: 24rpx;
		margin-bottom: 24rpx;
	}

	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-price {
		color: #31b0e5;
		font-weight: bold;
	}

	.card-hot {
		background: #f00;
		color: #fff;
		border-radius: 8rpx;
		padding: 2rpx 8rpx;
		font-size: 20rpx;
	}

	.course-list {
		margin-bottom: 20rpx;
	}

	.course-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-bottom: 12rpx;
	}

	.course-title {
		font-weight: bold;
		font-size: 36rpx;
		display: block;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.course-info {
		color: #888;
		font-size: 24rpx;
		margin: 4rpx 0;
		display: flex;
	}

	.tanchuang {
		position: fixed;
		width: 100%;
		height: 500rpx;
		z-index: 999;
	}

	.dibukong {
		width: 100%;
		height: 150rpx;
	}

	.dibu {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.pay-btn {
		background: #31b0e5;
		color: #fff;
		font-size: 28rpx;
		border-radius: 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pay-btn .iconfont {
		font-size: 32rpx;
		margin-right: 8rpx;
		color: #fff;
	}
	.muli_2_2_c{
		margin-left: 10rpx;
	}
</style>